<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <style th:fragment="fonts">
      @font-face {
        font-family: 'Open Sans';
        src: url([(@{/plugin/css/fonts/opensans/OpenSans-Light.ttf})]) format('truetype');
        font-weight: 300;
        font-style: normal;
      }

      @font-face {
        font-family: 'Open Sans';
        src: url([(@{/plugin/css/fonts/opensans/OpenSans-Regular.ttf})]) format('truetype');
        font-weight: 400;
        font-style: normal;
      }

      @font-face {
        font-family: 'Open Sans';
        src: url([(@{/plugin/css/fonts/opensans/OpenSans-Semibold.ttf})]) format('truetype');
        font-weight: 600;
        font-style: normal;
      }

      @font-face {
        font-family: 'FireMonIcons';
        src: url([(@{/plugin/css/fonts/firemonicons/FireMonIcons.woff})]) format('woff'),
      url([(@{/plugin/css/fonts/firemonicons/FireMonIcons.ttf})]) format('truetype');
        font-weight: 600;
        font-style: normal;
      }
    </style>
  </head>

  <body>

    <div th:fragment="reportHeader" class="container-fluid">
      <header class="row">
        <div class="col-xs-12">
          <div class="report__logo">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 94.1 56" xml:space="preserve">
              <g id="icn_x5F_fm">
                <g>
                  <polygon fill="#E63C2F" points="58.5,50.7 53.2,54.3 50,49.8 55.2,46.2"/>
                  <polygon fill="#FF5000" points="53.9,44.4 48.6,48 45.4,43.5 50.6,39.9"/>
                  <polygon fill="#FF5000" points="49.3,38 44.1,41.7 40.8,37.2 46,33.6   "/>
                  <polygon fill="#FFA400" points="44.7,31.7 39.5,35.4 36.2,30.9 41.4,27.2   "/>
                </g>
                <path fill="#FFA400" d="M29,28.9c-7.8,0-14.2-6.3-14.2-14S21.2,1,29,1s14.2,6.3,14.2,14S36.9,28.9,29,28.9z M29,5.3   c-5.4,0-9.8,4.3-9.8,9.7s4.4,9.7,9.8,9.7s9.8-4.3,9.8-9.7S34.5,5.3,29,5.3z"/>
              </g>
            </svg>
          </div>
          <h1>
            <span th:text="${report.name}">Report Name</span>
            <small th:text="${#calendars.format(#execInfo.now)}">March 31, 2016 1:44:02 PM UTC</small>
          </h1>
        </div>
      </header>
      <div class="row">
        <div class="report__description col-xs-12">
          <h2 th:text="${report.description}">Displays a device's security rules overlaid with usage counts for a defined period of time.</h2>
        </div>
      </div>
    </div>

    <div class="container-fluid" th:fragment="deviceOrGroupHeader">
      <!-- DEVICES -->
      <div class="row" th:if="${device != null}">
        <div class="report__device-info" th:classappend="${(deviceLastRevDate == null)} ? col-xs-4 : col-xs-3">
          <div th:text="#{Device}" class="report__device-title-top"></div>
          <div class="report__device-title-bottom">
            <i th:class="${deviceIcon.forDevice(device)}"></i>
            <span th:text="${device.getName()}">Test Device 1</span>
            <small>(ID: <span th:text="${device.getId()}"></span>)</small>
          </div>
        </div>
        <div class="report__device-info" th:classappend="${(deviceLastRevDate == null)} ? col-xs-4 : col-xs-3">
          <div class="report__device-title-top" th:text="#{ManagementIpAddress}"></div>
          <div class="report__device-title-bottom">
            <span th:text="|${device.getManagementIp() == null ? 'No Management Ip' : device.getManagementIp()}|">Test Device 1</span>
          </div>
        </div>
        <div class="report__device-info" th:classappend="${(deviceLastRevDate == null)} ? col-xs-4 : col-xs-3">
          <div class="report__device-title-top" th:text="Product"></div>
          <div class="report__device-title-bottom">
            <span th:text="|${device.getDevicePack().getVendor()} ${device.getDevicePack().getDeviceName()}|">Vendor Info</span>
          </div>
        </div>
        <div class="report__device-info col-xs-3" th:if="${deviceLastRevDate != null}">
          <div class="report__device-title-top">
            <span th:text="#{LAST_REVISION}"></span>
          </div>
          <div class="report__device-title-bottom">
            <span th:if="${deviceLastRevDate != null}" th:text="${#temporals.format(deviceLastRevDate)}">March 31, 2016 1:44:02 PM UTC</span>
          </div>
        </div>
      </div>
      <!-- END DEVICES -->

      <!-- DEVICE GROUPS -->
      <div class="row" th:if="${deviceGroup != null}">
        <div class="report__device-info col-xs-6">
          <div class="report__device-title-top" th:text="#{DeviceGroup}">
          </div>
          <div class="report__device-title-bottom">
            <i th:class="${deviceIcon.forType('DEVICE_GROUP')}"></i>
            <span th:text="|${deviceGroup.getName()} (#{ID}: ${deviceGroup.getId()})|">Test Device 1</span>
          </div>
        </div>
        <div class="report__device-info col-xs-6">
          <div class="report__device-title-top" th:text="#{Devices}">
            <h3 ></h3>
          </div>
          <div class="report__device-title-bottom">
            <span th:text="${devices.size()}">44</span>
          </div>
        </div>
        <div th:if="${devices.size() gt 0}" class="container-fluid">
          <table>
            <thead>
              <tr>
                <th th:text="#{Device}"></th>
                <th th:text="#{ManagementIpAddress}"></th>
                <th th:text="#{Product}"></th>
                <th th:text="#{LAST_REVISION}"></th>
              </tr>
            </thead>
            <tbody>
              <th:block th:each="device : ${devices}">
                <tr>
                  <td>
                    <i th:class="${deviceIcon.forDevice(device)}"></i>
                    <a th:if="${(devicePolicyRulesMap != null and devicePolicyRulesMap.containsKey(device.name)) or linkDeviceName == true}" th:text="${device.name}" th:href="'#'+${device.name}">Test Device 1</a>
                    <span th:if="${(devicePolicyRulesMap == null or !devicePolicyRulesMap.containsKey(device.name)) and linkDeviceName == null}" th:text="${device.name}">Test Device 1</span>
                    <small>(ID: <span th:text="${device.getId()}"></span>)</small>
                  </td>
                  <td>
                    <span th:text="|${device.getManagementIp() == null ? 'No Management Ip' : device.getManagementIp()}|">Test Device 1</span>
                  </td>
                  <td>
                    <span th:text="|${device.getDevicePack().getVendor()} ${device.getDevicePack().getDeviceName()}|">Vendor Info</span>
                  </td>
                  <td>
                    <div th:with="latestRevDate=${deviceLastRevMap.get(device.getId())}">
                      <span th:if="${latestRevDate != null}" th:text="${#temporals.format(latestRevDate)}">March 31, 2016 1:44:02 PM UTC</span>
                    </div>
                  </td>
                </tr>

              </th:block>

            </tbody>
          </table>
        </div>
      </div>
      <!-- END DEVICE GROUPS -->
    </div>

    <!-- Abbreviated Revision Table -->
    <table th:fragment="abbrRevisionTable">
      <thead>
      <tr>
        <th th:text="#{Revision}"></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>
          <div th:replace="common.html::revisionData"></div>
        </td>
      </tr>
      </tbody>
    </table>

    <div th:fragment="revisionData">
      <span class="icon" th:classappend="${icon}"></span>
      <span th:text="${id}"></span><br/>
      <span th:text="${#temporals.format(date)}">Tue Feb 10 08:17:03 CST 2015</span><br/>
      <span th:if="${user != null}"><span th:text="#{ChangedBy}">by</span>:</span>
      <span th:if="${user == null}">&nbsp;</span>
      <span th:text="${user}">user</span>
    </div>

    <!-- File list -->
    <div th:fragment="fileList" th:if="${deviceComparison.getFileComparisons() != null and deviceComparison.getFileComparisons().size() gt 0}">
      <h4 th:text="#{Files}">Files</h4>
      <p class="file-summary" th:text="#{FileDiffSummary(${deviceComparison.getNumFilesChanged()}, ${deviceComparison.getFileComparisons().size()})}">0 of 1 files compared have changes</p>
      <ul class="file-list">
        <li th:each="comparison : ${deviceComparison.getFileComparisons()}">
          <a th:if="${comparison.getException() != null}" th:href="|#${comparison.getFrom().getFile().getName()}|">
            <span th:text="${comparison.getFrom().getFile().getName()}">Filename</span>
            <span class="icon icon--warn remove-red"></span>
          </a>
          <a th:if="${comparison.getException() == null and comparison.getChangeCount() gt 0}" th:href="|#${comparison.getFrom().getFile().getName()}|">
            <span th:text="${comparison.getFrom().getFile().getName()}">Filename</span>
            <span class="icon icon--warn modify-blue"></span>
          </a>
          <span th:if="${comparison.getException() == null and comparison.getChangeCount() eq 0}"
                th:text="${comparison.getFrom().getFile().getName()}">Filename</span>
        </li>
      </ul>
    </div>

    <!-- File diffs -->
    <div th:fragment="fileDiff"
         th:each="comparison : ${deviceComparison.getFileComparisons()}"
         th:if="${comparison.hasChanges() || comparison.getException() != null}"
         class="panel panel-default">
      <div class="panel-heading">
        <a th:id="${comparison.getFrom().getFile().getName()}"></a>
        <div th:if="${(showTopTink != null and showTopTink)}" class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
        <h4 th:if="${!(isFileComparisonReport != null and isFileComparisonReport)}" class="panel-title">
          <span th:text="${comparison.getFrom().getFile().getName()}">From File</span>
        </h4>
        <h4 th:if="${(isFileComparisonReport != null and isFileComparisonReport)}" class="panel-title">
          <span th:text="${comparison.getFromFilename()}">From File</span>
          &gt;
          <span th:text="${comparison.getToFilename()}">To File</span>
        </h4>
      </div>
      <div class="panel-body">
        <div th:if="${comparison.getException() != null}">
          <span class="text-warning" th:text="${comparison.getException().getMessage()}">Message</span>
        </div>
        <table class="table file-diff" th:each="diff : ${comparison.getDiffs()}">
          <span th:each="hunk : ${diff.getHunks()}">
            <tr th:each="line : ${hunk.getLines()}"
                th:with="add=${line.getMarker()=='+'},remove=${line.getMarker()=='-'}"
                th:class="${add}? 'success' : (${remove}? 'danger' : '')">
              <td th:text="${line.getFromLineNumber()}">From</td>
              <td th:text="${line.getToLineNumber()}">To</td>
              <td class="diff-separator" th:text="${line.getMarker()}">Diff</td>
              <td>
                <pre class="file-diff" th:text="${line.getContentTrimmed()}">Content</pre>
              </td>
            </tr>
          </span>
        </table>
      </div>
    </div>

    <!-- Device Info td -->
    <td th:fragment="deviceInfoTd">
      <div>
        <i th:class="${deviceIcon.forType(device.getDeviceType())}"></i>
        <a th:if="${groupBy == 'DEVICE'}" th:text="${device.getName()}" th:href="|#${device.getName()}|"></a>
        <span th:if="${groupBy == 'CONTROL'}" th:text="${device.getName()}">Test Device 1</span>
        <span th:text="' (ID: ' + ${device.getId()} + ')'">Test Device 1</span>
      </div>
      <div>
        <span th:text="|${device.getManagementIp() == null ? 'No Management Ip' : device.getManagementIp()}">Test Device 1</span>
      </div>
      <div>
        <span th:text="|${device.getVendor()} ${device.getProduct()}|">Vendor Info</span>
      </div>
      <div>
        <span th:text="|#{Description}: ${device.getDescription()}|">This is a description.</span>
      </div>
    </td>

    <!-- Device Stats td-->
    <td th:fragment="deviceStatsTd" class="report__stat-cell">
      <table class="no-stripe">
        <tbody>
        <tr>
          <td class="text-right">
            <div>
              <span th:text="#{SCI}">SCI</span>:
            </div>
          </td>
          <td class="text-left">
            <div>
              <i th:class="${severityIconHelper.forSeverity(device.getSci())}"></i>
              <span th:text="${#numbers.formatDecimal(device.getSci(), 1, 2)}">2.13</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="text-right">
            <div>
              <span th:text="#{SCIChange}">SCI Change</span>:
            </div>
          </td>
          <td class="text-left">
            <div th:if="${device.sciChange} > 0.0">
              <i class="icon icon--triangle-up severity-critical"></i>
              <span th:text="|+${#numbers.formatDecimal(device.sciChange, 1, 2)}%|">0.00</span>
            </div>
            <div th:if="${device.sciChange} < 0.0">
              <i class="icon icon--triangle-down severity-low"></i>
              <span th:text="|-${#numbers.formatDecimal(device.sciChange, 1, 2)}%|">0.00</span>
            </div>
            <div th:if="${device.sciChange} == 0.0">
              <i class="icon icon--stop modify-blue"></i>
              <span th:text="#{NoSciChange}">(no change)</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="text-right">
            <div th:if="${device.getTotalSecRules() != null}">
              <span th:text="#{SecurityRules}">Rules</span>:
            </div>
          </td>
          <td class="text-left">
            <div th:if="${device.getTotalSecRules() != null}">
              <span th:text="${#numbers.formatInteger(device.getTotalSecRules(),0,'DEFAULT')}">472</span>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </td>

    <!-- Device Last Revision td -->
    <td th:fragment="deviceLastRevisionTd">
      <div th:if="${device.getLastRevision() != null}">
        <div>
          <span th:with="df=#{ShortDateTimeFormatWithoutZone}"
                th:text="${#temporals.format(device.getLastRevision(),df)}">January 12, 2015 9:19:00 AM</span>
        </div>
        <div>
          <span th:text="#{ChangedBy}"></span>:
          <span th:text="${device.getChangedBy()}"></span>
        </div>
      </div>
    </td>

    <!-- Device Failed Controls td -->
    <td th:fragment="deviceFailedControlsTd">
      <div>
        <i class="icon icon--stop severity-critical"></i>
        <span th:text="${d.critical}">4</span><br>
        <i class="icon icon--stop severity-high"></i>
        <span th:text="${d.high}">2</span><br>
        <i class="icon icon--stop severity-medium"></i>
        <span th:text="${d.medium}">7</span><br>
        <i class="icon icon--stop severity-low"></i>
        <span th:text="${d.low}">0</span>
        <hr class="hr--tight">
        <span th:text="#{Total(${d.totalFailedControls})}">13</span>
      </div>
    </td>

    <!-- footer -->
    <footer th:fragment="footer" class="container-fluid">
      <div class="row">
        <div class="col-xs-12">
          <svg xmlns="http://www.w3.org/2000/svg" id="dd3db693-723e-43db-b0e2-f740b21067d9" data-name="firemon" viewBox="0 0 333.87 64.52">
            <title>fm_logos</title>
            <g>
              <g id="862de53a-3165-4a27-92c5-05b8d4950e77" data-name="text">
                <path d="M9.62,32.66V11.46A1.38,1.38,0,0,1,11,10.08H24a1,1,0,0,1,1.12,1v0.22a1,1,0,0,1-1.12,1h-12v8.89h9.05a1,1,0,0,1,1.12,1v0.15a1,1,0,0,1-1.12,1H12.07v9.25A1,1,0,0,1,11,33.79H10.67A1,1,0,0,1,9.62,32.66Z" fill="#fff"/>
                <path d="M58.06,32.66V11.06a1,1,0,0,1,1-1.13h0.32a1,1,0,0,1,1.08,1.13v21.6a1,1,0,0,1-1.08,1.13H59.1A1,1,0,0,1,58.06,32.66Z" fill="#fff"/>
                <path d="M108.19,32.92l-7.57-9.18H97.69v8.92a1,1,0,0,1-1.08,1.13H96.32a1,1,0,0,1-1-1.13V11.46a1.38,1.38,0,0,1,1.37-1.38h6.42c5.45,0,8.4,2.29,8.4,6.81,0,4.26-2.74,6.78-7.75,6.85l7.47,8.89a1.43,1.43,0,0,1-1.48,1.17A2,2,0,0,1,108.19,32.92ZM97.69,21.63h5.59c3.86,0,5.66-1.86,5.66-4.66,0-3.06-1.95-4.66-5.81-4.66H97.69v9.32Z" fill="#fff"/>
                <path d="M144.57,32.26V11.46a1.38,1.38,0,0,1,1.37-1.38h14a1,1,0,0,1,1.12,1v0.22a1,1,0,0,1-1.12,1H147v8.12h10.32a1,1,0,0,1,1.12,1v0.15a1,1,0,0,1-1.12,1H147v8.74h13.09a0.94,0.94,0,0,1,1.12,1v0.22a1,1,0,0,1-1.12,1.06H145.95A1.38,1.38,0,0,1,144.57,32.26Z" fill="#fff"/>
                <path d="M194.2,32.66V11.5A1.61,1.61,0,0,1,196,9.93h0.58c1.26,0,1.59.58,2.13,1.86l6.13,13.73L211,11.79c0.54-1.27.87-1.86,2.13-1.86h0.51a1.61,1.61,0,0,1,1.77,1.57V32.66a1,1,0,0,1-1,1.13H214a0.94,0.94,0,0,1-1-1.13V12.78l-6.13,13.44a2.11,2.11,0,0,1-2.13,1.57,2.08,2.08,0,0,1-2.13-1.57l-6.1-13.44V32.66a0.93,0.93,0,0,1-1,1.13h-0.36A0.92,0.92,0,0,1,194.2,32.66Z" fill="#fff"/>
                <path d="M305.46,32.66V11.61a1.46,1.46,0,0,1,1.33-1.68h0.61c0.9,0,1.3.47,1.88,1.31l12.66,18.54V11.06a0.93,0.93,0,0,1,1-1.13h0.32a0.92,0.92,0,0,1,1,1.13V32.12A1.42,1.42,0,0,1,323,33.79h-0.18a1.6,1.6,0,0,1-1.59-.95L307.77,13.21V32.66a0.93,0.93,0,0,1-1,1.13h-0.33A0.92,0.92,0,0,1,305.46,32.66Z" fill="#fff"/>
              </g>
              <g id="a5878c69-8e34-4a91-b33a-d0e3d6fa2991" data-name="icon">
                <g>
                  <rect x="278.99" y="50.75" width="5.88" height="5.14" transform="translate(21.46 173.66) rotate(-35.51)" fill="#f15d22"/>
                  <rect x="274.79" y="44.86" width="5.88" height="5.14" transform="translate(24.1 170.13) rotate(-35.51)" fill="#f78e1e"/>
                  <rect x="270.6" y="38.98" width="5.88" height="5.14" transform="translate(26.72 166.57) rotate(-35.5)" fill="#f78e1e"/>
                  <rect x="266.4" y="33.09" width="5.88" height="5.14" transform="translate(29.37 163.06) rotate(-35.51)" fill="#fbb034"/>
                </g>
                <path d="M258.87,33.42a13,13,0,1,1,13-13A13,13,0,0,1,258.87,33.42Zm0-22a9,9,0,1,0,9,9A9,9,0,0,0,258.87,11.4Z" fill="#fbb034"/>
              </g>
            </g>
          </svg>
          <p>
            <b>Version</b>: <span th:text="${serverVersion}">8.0.0</span> |
            <b>Username</b>: <span th:text="${runAsUsername}">firemon</span>
          </p>
          <p>Copyright 2015-<span th:text="${#dates.year(#dates.createToday())}"></span> FireMon, LLC.  All rights reserved.</p>
        </div>
      </div>
    </footer>

  </body>
</html>
